<template>
	<view class="page index">
		<view class="header">
			<nav-bar title="我的画像" :leftArrow="true"></nav-bar>
		</view>
		<view class="main">
			<view class="draw1">
				<view class="draw1-text">
					<view>
						<text>张一一的画像</text>
					</view>
					<view class="decoration">
						<text>前往佩戴</text>
					</view>
				</view>
				<view class="container">
					<view class="portrait-container"></view>
					<view class="medal1"><text>忠诚</text></view>
					<view class="medal2"><text>阳光</text></view>
					<view class="medal3"><text>美丽</text></view>
					<view class="medal4"><text>美丽</text></view>
				</view>
			</view>
			<view class="draw2">
				<view class="chart">
					<canvas canvas-id="myid" id="myid" class="charts" @tap="tap" />

				</view>
			</view>
			<view class="draw3">
				<view class="chart">
					<canvas canvas-id="myid2" id="myid2" class="charts" @tap="tap" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from "@qiun/ucharts";
	var uChartsInstance = {};
	export default {
		components: {},
		data() {
			return {
				cWidth: 750,
				cHeight: 500
			}
		},
		created() {

		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(650);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(400);
			console.log(this.cWidth, this.cHeight);
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["忠诚", "和顺", "美丽", "阳光"],
						// categories: [`我我${'\n'}111`, "和顺", "美丽", "阳光"],
						series: [{
								data: [120, 120, 120, 120]
							},
							{
								data: [100, 100, 90, 100]
							}
						]
					};
					this.drawCharts('myid', res);
				}, 500);
				setTimeout(() => {
					let res = {
						// categories: ["德育", "劳育", "美育", "体育", "智育"],
						categories: ["德育", `劳育${'\n'}`, "美育", "体育", "智育"],
						series: [{
								data: [120, 120, 120, 120, 120]
							},
							{
								data: [100, 100, 100, 100, 100]
							}, {
								data: [80, 80, 60, 80, 80]
							}
						]
					};
					this.drawCharts2('myid2', res);
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "radar",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					dataPointShape: () => false,
					background: "#FFFFFF",
					color: ["#f9faf9", "#c7d9ee"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 0,
							gridEval: 0,
							opacity: 0.7,
							max: 120,
							labelShow: true,
							border: false,
							borderWidth: 0,
						}
					}
				});
			},
			drawCharts2(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "radar",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					dataPointShape: () => false,
					background: "#FFFFFF",
					color: ["#f9faf9", "#f1f1f1", "#c7d9ee"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 0,
							gridEval: 0,
							opacity: 0.7,
							max: 120,
							labelShow: true,
							border: false,
							borderWidth: 0,
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/common/style/common.scss';
	@import 'index.scss';
</style>